<template>
    <div v-loading="loading">
        <el-row :gutter="10">
            <!-- 左上角：基本信息 -->
            <el-col :span="24" class="detail-info-item">
                <ChildBasicInfo :child="child">
                    <template #header>
                        <div class="card-header">
                            <CardTitle title="基本信息" />
                            <el-button type="primary" size="small" text @click="openForm('update')">
                                编辑
                            </el-button>
                        </div>
                    </template>
                </ChildBasicInfo>
            </el-col>
            <el-card style="width: 100%; margin-top: 20px" shadow="never">
                <template #header>
                    <CardTitle title="身高信息" />
                </template>
                <ChildHeight :child-id="child.id" />
            </el-card>
        </el-row>
    </div>
    <!-- 表单弹窗：添加/修改 -->
    <ChildForm ref="formRef" @success="getChildData(id)" />
</template>
<script setup lang="ts">
import * as ChildApi from '@/api/member/child'
import { useTagsViewStore } from '@/store/modules/tagsView'
import ChildForm from '@/views/member/child/ChildForm.vue'
import ChildBasicInfo from './ChildBasicInfo.vue'
import ChildHeight from './ChildHeight.vue'
import { ElMessage } from 'element-plus'

defineOptions({ name: 'MemberUserChildDetail' })

const loading = ref(true) // 加载中
const child = ref < ChildApi.ChildVO > ({} as ChildApi.ChildVO)

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string) => {
    formRef.value.open(type, id)
}

/** 获得小孩信息 */
const getChildData = async (id: number) => {
    loading.value = true
    try {
        child.value = await ChildApi.getChild(id)
    } finally {
        loading.value = false
    }
}

/** 初始化 */
const { currentRoute } = useRouter() // 路由
const { delView } = useTagsViewStore() // 视图操作
const route = useRoute()
const id = Number(route.params.id)
onMounted(() => {
    if (!id) {
        ElMessage.warning('参数错误，小孩编号不能为空！')
        delView(unref(currentRoute))
        return
    }
    getChildData(id)
})

</script>
<style scoped lang="css">
.detail-info-item:first-child {
    padding-left: 0 !important;
}

/* first-child 不生效有没有大佬给看下q.q */
.detail-info-item:nth-child(2) {
    padding-right: 0 !important;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

</style>
